
<template>
    <!-- 使用方法 -->
    <!-- <icon-tag icon-class="more" class="more _cancelDrag" color="#afafaf"/> -->
    <svg
        aria-hidden="true"
        class="svg-icon"
        :style="`width:${props.size};height:${props.size}`">
        <use :xlink:href="symbolId" :fill="color"/>
    </svg>
</template>

<script setup lang="ts">
import {computed} from 'vue'
const props = defineProps({
    // icon 前缀
    prefix: {
        type: String,
        default: 'icon'
    },
    // icon类名
    iconClass: {
        type: String,
        default:''
    },
    // icon 颜色
    color: {
        type: String,
    },
    // icon 大小
    size: {
        type: String,
        default: '100%'
    }
})
const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`)
</script>
<style lang="scss" scoped>
.svg-icon {
    fill: currentColor;//currentColor变量表示当前图标color值
}
</style>